<template>

    <el-row>
        <el-col :span="4">
            <el-select v-model="query.checkState" placeholder="选择状态">
                <el-option label="选择状态" :value="null"/>
                <el-option label="已开立" value="已开立"/>
                <el-option label="已缴费" value="已缴费"/>
                <el-option label="执行完成" value="执行完成"/>
                <el-option label="已出结果" value="已出结果"/>
                <el-option label="已退费" value="已退费"/>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-button @click="getByConditions">搜索</el-button>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-table :data="requestList" 
		          stripe 
				  border
				  @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="55" />
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="medicalTechnology.techName" label="项目名称" width="180" />
                    <!-- <el-table-column prop="medicalTechnology.techPrice" label="价格" width="100"/> -->
                    <el-table-column prop="checkInfo" label="检查描述" width="150" show-overflow-tooltip/>
                    <el-table-column prop="checkPosition" label="检查部位" width="100"/>
                    <el-table-column prop="checkState" label="状态" width="100"/>
                    <el-table-column prop="checkRemark" label="备注" width="100" show-overflow-tooltip/>
                    <el-table-column label="检查结果" width="100">
                        <template #default="{row}" >
                            <el-popover 
                                v-if="row.checkState=='已出结果'"
                                effect="light" trigger="hover" placement="top" width="auto">
                                <template #default>
                                    <div>{{ row.checkResult }}</div>
                                </template>
                                <template #reference>
                                    <el-tag>查看</el-tag>
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="{row}" >
                            <el-button :disabled="row.checkState!='已开立'"
                                @click="handleCheck(row)" >取消</el-button>
                        </template>
                    </el-table-column>
		</el-table>
        </el-col>
    </el-row>

</template>

<script setup>
import httpRequest from '../../common/index.js';
import { onMounted, ref, getCurrentInstance, computed, watch } from 'vue';
import { ElMain, ElMessage } from 'element-plus';
import store from '@/store';
const {proxy} = getCurrentInstance();

// 接收父组件传值  挂号的id值
const props = defineProps({
    rid:{
        type: Number,
        required: true
    }
});

//查询条件
const query = ref({
    // registerId: props.rid,  //挂号id
    checkState: '已出结果'
})

//当前挂号id对应的检查集合  可以切换状态查询
const requestList = ref([])

//查询需要进行的检查   查询当前挂号对应的检查项目
const getByConditions = ()=>{
    httpRequest(
        proxy,
        'post',
        '/checkrequest/conditions/'+props.rid,
        query.value,
        resultBean=>{
            requestList.value = resultBean.data;
        }
    )
}

const activeTab = computed(()=>{
    return store.state.mrActiveTab;
})

watch(activeTab,(newValue,oldValue)=>{
    console.log('--------标签页切换了-------------------',newValue);
    if(newValue=='checkResult'){
        setTimeout(() => {
            getByConditions();              
        }, 100);
    }
},{
    immediate: true 
})

</script>

<style>
</style>